<script setup>
import logo from '@/assets/logo.png';
import 'animate.css';

</script>

<template>
  <div class="login-page">
    <!-- Header -->
    <a-layout-header class="header">
      <h2 style="position: relative; top: -5px; left: 10px; color: #64d5c8;">实习招聘信息爬虫系统设计与实现</h2>
    </a-layout-header>

    <!-- Content -->
    <a-layout-content class="content">
      <transition enter-active-class="animate__animated animate__fadeInRight"
        leave-active-class="animate__animated animate__fadeOutLeftBig">
        <router-view></router-view>
      </transition>
    </a-layout-content>

    <!-- Footer -->
    <a-layout-footer class="footer">
      <div class="footer-content">
        <div>
          客服电话：114-514-1919 ｜ 工作时间：8:00-22:00 ｜ 人力资源服务许可证 ｜ 营业执照 ｜ 朝阳区人社局监督电话
        </div>
        <div>
          Copyright © 2024 实习招聘信息爬虫系统设计与实现
        </div>
      </div>
    </a-layout-footer>
  </div>
</template>

<style scoped>
.login-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.header {
  height: 50px;
  background: url("@/assets/headerBg.png") center / cover no-repeat;
  color: #fff;
  padding: 16px;
}

.content {
  overflow: hidden;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
  background-image: url("@/assets/loginBg.png");
  background-size: cover;
  background-position: center;
}

.additional-options a {
  color: #1890ff;
  cursor: pointer;
}

.footer {
  background-color: #2b2d33;
  /* 深色背景 */
  color: #b0b3b8;
  /* 浅色文字 */
  text-align: center;
  padding: 16px;
  font-size: 14px;

  >div {
    margin: 4px 0;
  }
}
</style>
